<template>
  <div class="navPage">
    <el-menu
        router
        :default-active="defaultActive"
        class="el-menu-vertical"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#409eff">
      <template v-for="(r,i) in allRoute">
        <template v-if="r.children&&r.children.length>0">
          <el-submenu :index="r.path">
            <template slot="title">
              <i :class="r.icon"></i>
              <span>{{ r.name }}</span>
            </template>
            <template v-for="(rr,ii) in r.children">
              <el-menu-item :index="rr.path" :route="rr.path">{{ rr.name }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="r.path" :route="r.path">
            <i :class="r.icon"></i>
            <span slot="title">{{ r.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
    <div class="page_content">
      <router-view/>
    </div>
  </div>
</template>

<script>
import routeJson from "@/router/route.json";
export default {
  data() {
    return {
      allRoute:[],
      defaultActive:''
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        this.defaultActive= to.path
      }
    }
  },
  methods: {
  },
  mounted() {
    this.allRoute=routeJson[0].children[0].children
  }
}
</script>

<style lang="scss" scoped>
.navPage{
  display: flex;
}
.el-menu-vertical{
  width: 220px;
  border-color: #545c64;
}
.page_content{
  width: 100%;
  height: 100%;
}
</style>
